<template>
  <div>
    <van-nav-bar title="忘记密码"
                 left-text=""
                 left-arrow
                 @click-left="onClickLeft"/>
    <div class="vanTabs">
      <van-cell-group>
        <van-field v-model="onIphone"
                   clearable
                   label="绑定手机号："
                   placeholder="请输入绑定手机号"/>
        <van-field v-model="userCode"
                   center
                   clearable
                   label="短信验证码"
                   placeholder="请输入短信验证码">
          <van-button slot="button"
                      size="small"
                      :disabled="disabled"
                      type="primary"
                      @click="sendcode">{{btnTxt}}
          </van-button>
        </van-field>
        <van-field v-model="NewPasd"
                   clearable
                   type="password"
                   label="新登录密码："
                   placeholder="请输入6-15长度的密码"/>
        <van-field v-model="confirmPasd"
                   clearable
                   type="password"
                   label="确认新密码："
                   placeholder="请输入6-15长度的密码"/>
      </van-cell-group>
    </div>
    <van-button
      class="setPsdBtn"
      type="danger"
      size="large"
      @click="setPsdBtn2">确认修改
    </van-button>
  </div>
</template>

<script>
  import {getStore, setStore} from '../../../src/config/mUtils'

  export default {
    name: "forgetPsd",
    data() {
      return {
        active: 3,
        onIphone: '', //绑定手机号
        NewPasd: '', //新登录密码
        confirmPasd: '', //确认新登录密码
        btnTxt: '发送验证码',
        time: 0,
        disabled: false,
        userCode: ''
      }
    },
    methods: {
      //忘记密码
      setPsdBtn2() {
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        //验证手机号
        if ( !reg.test(this.onIphone) || this.onIphone.length == '' ) {
          this.$toast.fail('请输入正确的手机号码')
          return
        }

        //短信验证码
        if ( this.userCode.length == '' ) {
          this.$toast.fail('验证码不能为空')
          return
        }

        //密码验证
        if ( this.NewPasd.length == '' || this.confirmPasd.length == '' ) {
          this.$toast.fail('请输入密码')
          return
        }

        //密码长度验证
        if ( this.NewPasd.length < 6 || this.NewPasd.length > 15 || this.confirmPasd.length < 6 || this.confirmPasd.length > 15 ) {
          this.$toast.fail('密码长度最小为6位最大为16位请检查！')
          return
        }

        //验证两次密码一致
        if ( this.NewPasd.trim() !== this.confirmPasd.trim() ) {
          this.$toast.fail('两次输入值不一致！')
          return
        }

        this.$axios.post('user/setpasswd', this.qs.stringify({
          "mobile": this.onIphone,
          "code": this.userCode,
          "passwd": this.NewPasd,
        })).then((res) => {
          if ( res.data.status === 1 ) {
            this.$toast.success(res.data.message)
            setStore("userPsd", this.NewPasd)
            this.$router.go(-1)
          } else {
            this.$toast.fail(res.data.message)
            return
          }
        });

      },
      //发送验证码
      sendMsg() {
        this.$axios.post('user/sendMsg', this.qs.stringify({
          "phone": this.onIphone
        })).then((res) => {

          if ( res.data.message == '60秒钟之内不可再次发送' ) {
            this.$toast.fail(res.data.message)
            this.disabled = true
            return
          }

          if ( res.data.status === 1 ) {
            this.$toast.success(res.data.message)
            this.time = 60
            this.disabled = true
            this.timer()
          } else {
            this.$toast.fail(res.data.message)
            return
          }
        });
      },
      //验证码验证
      sendcode() {
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if ( this.onIphone == '' ) {
          this.$toast.fail('请输入手机号码')
        } else if ( !reg.test(this.onIphone) ) {
          this.$toast.fail('手机格式不正确')
        } else {
          this.sendMsg()
          this.disabled = true
        }
      },
      timer() {
        if ( this.time > 0 ) {
          this.time--;
          this.btnTxt = this.time + "s后重新获取";
          setTimeout(this.timer, 1000);
        } else {
          this.time = 0;
          this.btnTxt = "发送验证码";
          this.disabled = false;
        }
      },
      onClickLeft() {
        this.$router.go(-1)
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
  .vanTabs {
    margin-top: 10px;
  }

  .setPsdBtn {
    width: 95%;
    position: absolute;
    bottom: 0px;
    margin-left: 20px;
  }

  >>> .van-tabs__line {
    background-color: #fff;
  }
</style>
